<template>
  <div>
    <div v-show="isShow[0].show">
      <div>
        <div>
          <div class="brick-list">
            <div class="brick-item">
              <div style="padding: 20px 24px 8px">
                <div>
                  <span> 今日累计销售 </span>
                </div>
                <div>
                  <span>{{ soDay }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="brick-list">
            <div class="brick-item">
              <div style="padding: 20px 24px 8px">
                <div>
                  <span> 本月累计销售 </span>
                </div>
                <div>
                  <span>{{ soMonth }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="brick-list">
            <div class="brick-item">
              <div style="padding: 20px 24px 8px">
                <div>
                  <span> 今日累计采购 </span>
                </div>
                <div>
                  <span>{{ ecMoney_day }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="brick-list">
            <div class="brick-item">
              <div style="padding: 20px 24px 8px">
                <div>
                  <span> 本月累计采购 </span>
                </div>
                <div>
                  <span>{{ ecMoney_month }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          style="
            display: inline-block;
            position: relative;
            padding-left: 12px;
            padding-right: 12px;
            float: left;
          "
        >
          <div style="display: inline-block">
            <div id="so" style="width: 602.2px; height: 400px"></div>
          </div>
        </div>
        <div
          style="
            display: inline-block;
            position: relative;
            padding-left: 12px;
            padding-right: 12px;
            float: left;
          "
        >
          <div style="display: inline-block">
            <div id="e" style="width: 602.2px; height: 400px"></div>
          </div>
        </div>
      </div>
    </div>
    <div v-show="isShow[1].show">
      <div>
        <div>
          <div class="brick-list">
            <div class="brick-item">
              <div style="padding: 20px 24px 8px">
                <div>
                  <span> 今日订单量 </span>
                </div>
                <div>
                  <span>{{ salesCount_day }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="brick-list">
            <div class="brick-item">
              <div style="padding: 20px 24px 8px">
                <div>
                  <span> 今日销售额 </span>
                </div>
                <div>
                  <span>{{ salesMoney_day }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="brick-list">
            <div class="brick-item">
              <div style="padding: 20px 24px 8px">
                <div>
                  <span> 本月订单量 </span>
                </div>
                <div>
                  <span>{{ salesCount_month }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="brick-list">
            <div class="brick-item">
              <div style="padding: 20px 24px 8px">
                <div>
                  <span> 本月销售额 </span>
                </div>
                <div>
                  <span>{{ salesMoney_month }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          style="
            display: inline-block;
            position: relative;
            padding-left: 12px;
            padding-right: 12px;
            float: left;
            padding-top: 40px;
          "
        >
          <div style="display: inline-block">
            <div id="sales" style="width: 1228.4px; height: 400px"></div>
          </div>
        </div>
      </div>
    </div>
    <div v-show="isShow[2].show">
      <div>
        <div>
          <div class="brick-list">
            <div class="brick-item">
              <div style="padding: 20px 24px 8px">
                <div>
                  <span> 今日入库量 </span>
                </div>
                <div>
                  <span>{{ storage_day }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="brick-list">
            <div class="brick-item">
              <div style="padding: 20px 24px 8px">
                <div>
                  <span> 本月入库量 </span>
                </div>
                <div>
                  <span>{{ storage_month }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="brick-list">
            <div class="brick-item">
              <div style="padding: 20px 24px 8px">
                <div>
                  <span> 今日出库量 </span>
                </div>
                <div>
                  <span>{{ warehouse_day }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="brick-list">
            <div class="brick-item">
              <div style="padding: 20px 24px 8px">
                <div>
                  <span> 本月出库量 </span>
                </div>
                <div>
                  <span>{{ warehouse_month }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          style="
            display: inline-block;
            position: relative;
            padding-left: 12px;
            padding-right: 12px;
            float: left;
          "
        >
          <div style="display: inline-block">
            <div id="storage" style="width: 602.2px; height: 400px"></div>
          </div>
        </div>
        <div
          style="
            display: inline-block;
            position: relative;
            padding-left: 12px;
            padding-right: 12px;
            float: left;
          "
        >
          <div style="display: inline-block">
            <div id="warehouse" style="width: 602.2px; height: 400px"></div>
          </div>
        </div>
      </div>
    </div>
    <div v-show="isShow[3].show">
      <div>
        <div>
          <div class="brick-list">
            <div class="brick-item">
              <div style="padding: 20px 24px 8px">
                <div>
                  <span> 今日收入 </span>
                </div>
                <div>
                  <span>{{ fundingincMoney_day }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="brick-list">
            <div class="brick-item">
              <div style="padding: 20px 24px 8px">
                <div>
                  <span> 今日支出 </span>
                </div>
                <div>
                  <span>{{ fundingexMoney_day }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="brick-list">
            <div class="brick-item">
              <div style="padding: 20px 24px 8px">
                <div>
                  <span> 本月收入 </span>
                </div>
                <div>
                  <span>{{ fundingincMoney_month }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="brick-list">
            <div class="brick-item">
              <div style="padding: 20px 24px 8px">
                <div>
                  <span> 本月支出 </span>
                </div>
                <div>
                  <span>{{ fundingexMoney_month }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          style="
            display: inline-block;
            position: relative;
            padding-left: 12px;
            padding-right: 12px;
            float: left;
            padding-top: 40px;
          "
        >
          <div style="display: inline-block">
            <div id="fvl" style="width: 1228.4px; height: 400px"></div>
          </div>
        </div>
      </div>
    </div>
    <div v-show="isShow[4].show">

    </div>
    <div v-show="isShow[5].show">
      <div>
        <div>
          <div class="brick-list">
            <div class="brick-item">
              <div style="padding: 20px 24px 8px">
                <div>
                  <span> 今日采购订单量 </span>
                </div>
                <div>
                  <span>{{ ecCount_day }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="brick-list">
            <div class="brick-item">
              <div style="padding: 20px 24px 8px">
                <div>
                  <span> 今日采购额 </span>
                </div>
                <div>
                  <span>{{ ecMoney_day }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="brick-list">
            <div class="brick-item">
              <div style="padding: 20px 24px 8px">
                <div>
                  <span> 本月采购订单量 </span>
                </div>
                <div>
                  <span>{{ ecCount_month }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="brick-list">
            <div class="brick-item">
              <div style="padding: 20px 24px 8px">
                <div>
                  <span> 本月采购额 </span>
                </div>
                <div>
                  <span>{{ ecMoney_month }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          style="
            display: inline-block;
            position: relative;
            padding-left: 12px;
            padding-right: 12px;
            float: left;
            padding-top: 40px;
          "
        >
          <div style="display: inline-block">
            <div id="ec" style="width: 1228.4px; height: 400px"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      storage_day: 0,
      storage_month: 0,
      warehouse_day: 0,
      warehouse_month: 0,
      salesCount_day: 0,
      salesMoney_day: 0,
      salesCount_month: 0,
      salesMoney_month: 0,
      fundingincMoney_day: 0,
      fundingexMoney_day: 0,
      fundingincMoney_month: 0,
      fundingexMoney_month: 0,
      ecCount_day:0,
      ecMoney_day:0,
      ecCount_month:0,
      ecMoney_month:0,
      soDay:0,
      soMonth:0,
      userName: "",
      isShow: [
        {
          id: 1,
          show: false,
        },
        {
          id: 2,
          show: false,
        },
        {
          id: 3,
          show: false,
        },
        {
          id: 4,
          show: false,
        },
        {
          id: 5,
          show: false,
        },
        {
          id: 6,
          show: false,
        },
      ],
    };
  },
  created() {
    this.num();
    //销售
    this.sales_Data();
    this.soData()
    //仓库
    this.storage_Data();
    this.warehouse_Data();
    //财务
    this.fvl_Data();
    //采购
    this.ec_Data()
  },
  mounted() {
    //销售
    this.sales();
    this.so()
    //仓管
    this.storage();
    this.warehouse();
    //财务
    this.fvl();
    //采购
    this.ec()
    this.e()
  },
  methods: {
    num() {
      const roleId = sessionStorage.getItem("roleId");
      console.log(roleId);
      this.isShow.forEach((item) => {
        if (item.id == roleId) {
          item.show = true;
          console.log("........" + item.id);
        }
      });
    },
    charts1() {
      let myChart = this.$echarts.init(document.getElementById("echarts1"));

      var option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };
      myChart.setOption(option);
    },

    //销售
    sales_Data() {
      this.userName = sessionStorage.getItem("user");
      axios
        .post("http://localhost:8082/salc/salesData?name=" + this.userName)
        .then((res) => {
          this.salesCount_day = res.data.day.count;
          this.salesMoney_day = res.data.day.money;
          this.salesCount_month = res.data.month.count;
          this.salesMoney_month = res.data.month.money;
        });
    },
    sales() {
      let Xdata = [];
      let series1 = [];
      let series2 = [];
      this.userName = sessionStorage.getItem("user");
      let myChart = this.$echarts.init(document.getElementById("sales"));
      var option = {
        title: {
          text: "近七天销售额和订单量",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["订单", "销售额"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "订单",
            type: "line",
            stack: "总量",
            data: [],
          },
          {
            name: "销售额",
            type: "line",
            stack: "总量",
            data: [],
          },
        ],
      };
      myChart.setOption(option);

      axios
        .post("http://localhost:8082/salc/salesSevenDays?name=" + this.userName)
        .then((res) => {
          for (let index = 0; index < res.data.length; index++) {
            var item = res.data[index];
            Xdata.push(item.documentDate);
            series1.push(item.count);
            series2.push(item.money);
          }
          var option = myChart.getOption();
          option.xAxis[0].data = Xdata;
          option.series[0].data = series1;
          option.series[1].data = series2;
          myChart.setOption(option);
        });
    },
    soData(){
      axios.post("http://localhost:8082/so/soData").then(res=>{
        console.log(res.data)
        console.log("11111111111111111111")
        this.soDay = res.data.day.money
        this.soMonth = res.data.month.money
      })
    },
    so(){
      let myChart = this.$echarts.init(document.getElementById("so"));
      var Xdata = [];
      var Sdata = [];
      var option = {
        title: {
          text: "近半年销售统计",
          subtext: "数据来自网络",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: Xdata,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "入库量",
            type: "bar",
            barWidth: "60%",
            data: Sdata,
          },
        ],
      };
      myChart.setOption(option);

      axios.post("http://localhost:8082/so/soSevenDays").then((res) => {
        for (var i = 0; i < res.data.length; i++) {
          var item = res.data[i];
          Xdata.push(item.time);
          Sdata.push(item.money);
        }
        var option = myChart.getOption();
        option.series[0].data = Sdata;
        option.xAxis[0].data = Xdata;
        myChart.setOption(option);
      });
    },
    e(){
      var Xdata = [];
      var Sdata = [];
      let myChart = this.$echarts.init(document.getElementById("e"));
      var option = {
        title: {
          text: "近半年采购统计",
          subtext: "数据来自网络",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: Xdata,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "出库量",
            type: "bar",
            barWidth: "60%",
            data: Sdata,
          },
        ],
      };
      myChart.setOption(option);

      axios.post("http://localhost:8082/ec/ecyear").then((res) => {
        for (var i = 0; i < res.data.length; i++) {
          var item = res.data[i];
          Xdata.push(item.time);
          Sdata.push(item.money);
        }
        var option = myChart.getOption();
        option.series[0].data = Sdata;
        option.xAxis[0].data = Xdata;
        myChart.setOption(option);
      });
    },
    //仓库
    storage_Data() {
      axios.post("http://localhost:8082/alrs/storageData").then((res) => {
        this.storage_day = res.data.day;
        this.storage_month = res.data.month;
      });
    },
    warehouse_Data() {
      axios.post("http://localhost:8082/alrw/warehouseData").then((res) => {
        this.warehouse_day = res.data.day;
        this.warehouse_month = res.data.month;
      });
    },
    storage() {
      let myChart = this.$echarts.init(document.getElementById("storage"));
      var Xdata = [];
      var Sdata = [];
      var option = {
        title: {
          text: "近半年入库量",
          subtext: "数据来自网络",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: Xdata,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "入库量",
            type: "bar",
            barWidth: "60%",
            data: Sdata,
          },
        ],
      };
      myChart.setOption(option);

      axios.post("http://localhost:8082/alrs/halfYear").then((res) => {
        for (var i = 0; i < res.data.length; i++) {
          var item = res.data[i];
          Xdata.push(item.time);
          Sdata.push(item.count);
        }
        var option = myChart.getOption();
        option.series[0].data = Sdata;
        option.xAxis[0].data = Xdata;
        myChart.setOption(option);
      });
    },
    warehouse() {
      var Xdata = [];
      var Sdata = [];
      let myChart = this.$echarts.init(document.getElementById("warehouse"));
      var option = {
        title: {
          text: "近半年出库量",
          subtext: "数据来自网络",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: Xdata,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "出库量",
            type: "bar",
            barWidth: "60%",
            data: Sdata,
          },
        ],
      };
      myChart.setOption(option);

      axios.post("http://localhost:8082/alrw/halfYear").then((res) => {
        for (var i = 0; i < res.data.length; i++) {
          var item = res.data[i];
          Xdata.push(item.time);
          Sdata.push(item.count);
        }
        var option = myChart.getOption();
        option.series[0].data = Sdata;
        option.xAxis[0].data = Xdata;
        myChart.setOption(option);
      });
    },
    //财务
    fvl_Data() {
      axios.post("http://localhost:8082/fvl/fvlData").then((res) => {
        this.fundingexMoney_day = res.data.fvlDay[0].money;
        this.fundingincMoney_day = res.data.fvlDay[1].money;
        this.fundingexMoney_month = res.data.fvlMonth[0].money;
        this.fundingincMoney_month = res.data.fvlMonth[1].money;
        
        
      });
    },
    fvl() {
      let Xdata = [];
      let series1 = [];
      let series2 = [];
      this.userName = sessionStorage.getItem("user");
      let myChart = this.$echarts.init(document.getElementById("fvl"));
      var option = {
        title: {
          text: "近七天销售额和订单量",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["收入", "支出"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "收入",
            type: "line",
            stack: "总量",
            data: [],
          },
          {
            name: "支出",
            type: "line",
            stack: "总量",
            data: [],
          },
        ],
      };
      myChart.setOption(option);

      axios.post("http://localhost:8082/fvl/fvlyear").then((res) => {
        for (let index = 0; index < res.data.length; index++) {
          var item = res.data[index];
          Xdata.push(item.date);
          series1.push(item.incmoney);
          series2.push(item.exmoney);
        }
        var option = myChart.getOption();
        option.xAxis[0].data = Xdata;
        option.series[0].data = series1;
        option.series[1].data = series2;
        myChart.setOption(option);
      });
    },
    //采购
    ec_Data(){
      axios.post("http://localhost:8082/ec/ecData").then((res) => {
        this.ecCount_day = res.data.day.count
        this.ecMoney_day = res.data.day.money
        this.ecCount_month = res.data.month.count
        this.ecMoney_month = res.data.month.money
      })
    },
    ec(){
    let Xdata = [];
      let series1 = [];
      let myChart = this.$echarts.init(document.getElementById("ec"));
      var option = {
        title: {
          text: "近七天采购订单量",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["采购订单量"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "收入",
            type: "line",
            stack: "总量",
            data: [],
          },
        ],
      };
      myChart.setOption(option);

      axios.post("http://localhost:8082/ec/ecSevenDays").then((res) => {
        for (let index = 0; index < res.data.length; index++) {
          var item = res.data[index];
          Xdata.push(item.documentDate);
          series1.push(item.count);
        }
        var option = myChart.getOption();
        option.xAxis[0].data = Xdata;
        option.series[0].data = series1;
        myChart.setOption(option);
      });
    }
  },
};
</script>
  
<style>
.brick-list {
  position: relative;
  padding-left: 12px;
  padding-right: 12px;
  margin-bottom: 24px;
  float: left;
}
.brick-item {
  z-index: 1;
  width: 289.1px;
  height: 107px;
  background: #fff;
  transition: all 0.2s linear;
}
.brick-item:hover {
  z-index: 2;
  -webkit-box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
  box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
  -webkit-transform: translate3d(0, -2px, 0);
  transform: translate3d(0, -2px, 0);
}
</style>